<template>
  <div class="app-container">
    <search-box :isMulti="false">
      <template slot="content">
        <div class="left-box">

          <el-form-item label="顾客姓名：">
            <el-input v-model="listQuery.clientName"
                      placeholder="请输入"
                      clearable/>
          </el-form-item>


        </div>
        <div class="right-box">
          <el-button size="mini" type="success"
                     @click="handleCreate">新增
          </el-button>

          <el-button size="mini"
                     @click="handleFilter">查询
          </el-button>
          <el-button size="mini" type="info"
                     @click="reset">重置
          </el-button>
        </div>
      </template>
    </search-box>
    <div class="table-wrap">
      <el-table :data="list"
                style="width:100%"
                element-loading-text="Loading"
                height="600"  width="150">
        <el-table-column
          type="index"
          width="50"
          label="序号"
        ></el-table-column>
        <el-table-column prop="userAccount"
                         label="顾客账户" >
        </el-table-column>

        <el-table-column prop="clientCode"
                         label="顾客编号" >
        </el-table-column>

        <el-table-column prop="clientName"
                         label="顾客姓名">
        </el-table-column>
        <el-table-column prop="clientCard"
                         label="顾客身份证" >
        </el-table-column>
        <el-table-column prop="clientTel"
                         label="顾客电话" >
        </el-table-column>
        <el-table-column prop="clientBirthday"
                         label="顾客生日" >
          <template slot-scope="scope">
            <div >

              {{scope.row.clientBirthday.substring(0,10)}}

            </div>
          </template>
        </el-table-column>
        <el-table-column prop="clientGrander"
                         label="顾客性别" >
        </el-table-column>
        <el-table-column prop="clientWechat"
                         label="顾客微信" >
        </el-table-column>
        <el-table-column prop="memberLength"
                         label="入会时长" >
        </el-table-column>

        <el-table-column prop="memberType"
                         label="会员类型" >
        </el-table-column>
        <!--        <el-table-column prop="createDate"-->
<!--                         label="创建时间" value-format="yyyy-MM-dd">-->
<!--        </el-table-column>-->
        <el-table-column label="操作"
                         width="200">
          <template slot-scope="scope">
            <div class="scope-operate">
              <el-button type="info" size="mini" @click="handleUpdate(scope.row)">编辑
              </el-button>
              <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除
              </el-button>

            </div>
          </template>
        </el-table-column>


      </el-table>
      <pagination v-show="total>0"
                  :total="total"
                  :page.sync="listQuery.pageNumber"
                  :limit.sync="listQuery.pageSize"
                  @pagination="getList"/>
    </div>


    <!--    //dialog弹窗 在页面的最后一个</div>的上面-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      style="margin-top: -6%"
      width="30%"
      >

      <el-form ref="form" :model="form" :rules = 'rules' label-width="120px">
        <el-form-item label="顾客账户" prop="userAccount">
          <el-input v-model="form.userAccount"></el-input>
        </el-form-item>
        <el-form-item label="顾客编号" prop="clientCode">
          <el-input v-model="form.clientCode"></el-input>
        </el-form-item>
        <el-form-item label="顾客姓名" prop="clientName">
          <el-input v-model="form.clientName"></el-input>
        </el-form-item>
        <el-form-item label="顾客身份证" prop="clientCard">
          <el-input v-model="form.clientCard"></el-input>
        </el-form-item>
        <el-form-item label="顾客电话" prop="clientTel">
          <el-input v-model="form.clientTel"></el-input>
        </el-form-item>
        <el-form-item label="顾客生日" prop="clientBirthdayStr">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.clientBirthdayStr" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>

        <el-form-item label="顾客性别" prop="clientGrander">
          <el-select v-model="form.clientGrander" placeholder="请选择">
            <el-option label="男" :value="0"></el-option>
            <el-option label="女" :value="1" checked="checked"></el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="顾客微信" prop="clientWechat">
          <el-input v-model="form.clientWechat"></el-input>
        </el-form-item>
        <el-form-item label="入会时长" prop="memberLength">
          <el-input v-model="form.memberLength"></el-input>
        </el-form-item>
        <el-form-item label="会员类型" prop="memberType">
          <el-input v-model="form.memberType"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">提 交</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">

  </span>

    </el-dialog>

  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { quillEditor } from 'vue-quill-editor'//添加富文本编辑器
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  // 当然你也可以为了方便使用，将它注册到全局
  import bus from '@/utils/eventBus'
  import searchBox from '@/components/searchBox.vue'
  import * as client from '@/api/personal/client'
  import * as memberType from '@/api/member/memberType'
  import * as users from '@/api/personal/users'


  export default {
    name: 'AdminUser',
    components: { Pagination, searchBox, quillEditor },
    directives: { waves },
    filters: {},
    data() {
      return {
        content: '',
        editorOption: {},
        list: null,
        memberTypeList: null,
        usersList: null,
        total: 0,
        listQuery: { // 查询列表时的参数对象
          pageNumber: 1,
          pageSize: 50,
          appName: process.env.VUE_APP_APP_NAME,
          tenantIdList: []
        },
        dialogVisible: false,
        dialogVisibleDesc: false,
        dialogTitle:'',
        form:{
          clientBirthdayStr: '',
        },

        rules: {
          userAccount: [{ required: true, message: '顾客账户必填', trigger: 'blur' }],
          clientCode: [{ required: true, message: '顾客编号必填', trigger: 'blur' }],
          clientName: [{ required: true, message: '顾客姓名必填', trigger: 'blur' }],
          clientCard: [{ required: true, message: '顾客身份证必填', trigger: 'blur' }],
          clientTel: [{ required: true, message: '顾客电话必填', trigger: 'blur' }],
          clientBirthday: [{ required: true, message: '顾客生日必填', trigger: 'blur' }],
          clientGrander: [{ required: true, message: '顾客性别必选', trigger: 'blur' }],
          clientWechat: [{ required: true, message: '顾客微信必选', trigger: 'blur' }],
          memberLength: [{ required: true, message: '入会时间必填', trigger: 'blur' }],
          memberType: [{ required: true, message: '会员类型必选', trigger: 'blur' }],
        }
      }
    },
    computed: {
      ...mapGetters([
        'selectedTenantId',
        'tenantList'
      ])
    },
    created() {

      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      this.getList()

      // 监听 租户改变的事件,选择不同租户后,立马刷新数据
      bus.$on('selectedTenantIdChanged', () => {
        console.log('selectedTenantIdChanged事件触发...')
        this.getList()
      })
    },
    mounted() {

    },
    beforeDestroy() { // 当路由切换到其他页面时触发
      bus.$off('selectedTenantIdChanged')
    },
    methods: { //所有的方法写在当前钩子函数下

      onEditorReady(editor) {
      },

      async getList() { // 获取列表数据
        this.listQuery.tenantIdList = []
        if (this.selectedTenantId == undefined) {//当前选中所有的租户
          this.tenantList.forEach((tenant, index) => {
            this.listQuery.tenantIdList.push(tenant.id)
          })
        } else {
          this.listQuery.tenantIdList.push(this.selectedTenantId)
        }
        const { content } = await client.getClientList(this.listQuery)
        this.list = content.list
        this.total = content.totalCounts
      },

      async getUserAccountList() { // 获取列表数据
        this.listQuery.tenantIdList = []
        if (this.selectedTenantId == undefined) {//当前选中所有的租户
          this.tenantList.forEach((tenant, index) => {
            this.listQuery.tenantIdList.push(tenant.id)
          })
        } else {
          this.listQuery.tenantIdList.push(this.selectedTenantId)
        }
        const { content } = await users.getUsersList(this.listQuery)
        this.usersList = content.list
        this.total = content.totalCounts
      },


      async getMemberTypeList() { // 获取列表数据
        this.listQuery.tenantIdList = []
        if (this.selectedTenantId == undefined) {//当前选中所有的租户
          this.tenantList.forEach((tenant, index) => {
            this.listQuery.tenantIdList.push(tenant.id)
          })
        } else {
          this.listQuery.tenantIdList.push(this.selectedTenantId)
        }
        const { content } = await memberType.getMemberList(this.listQuery)
        this.memberTypeList = content.list
        this.total = content.totalCounts
      },


      handleFilter() {
        this.listQuery.pageNumber = 1
        this.getList()
      },

      //新增数据
      handleCreate() {
        this.dialogVisible = true
        this.dialogTitle='新增'
        this.form = {}
        this.getUserAccountList();
        this.getMemberTypeList();
      },
      //编辑数据
      handleUpdate(row) {

        this.dialogVisible = true
        this.dialogTitle='编辑';
        this.form = row;
        this.$set(this.form,'clientBirthdayStr',row.clientBirthday);
        this.getUserAccountList();
        this.getMemberTypeList();
      },
      //删除数据
      handleDelete(row) {

        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          client.deleteClientInfo(row).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }).catch(() => {
        })
      },


      handleLookProInfo(row){
        this.dialogVisibleDesc = true;
        this.proInfo = row;
      },


      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },

      //页面表单提交
      onSubmit(){

        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.form.tenantId = this.$store.getters.selectedTenantId

            if (this.dialogTitle == '新增') {
              client.createClientInfo(this.form).then((res) => {
                console.log(res)
                if (res.status == 200) {
                  this.$notify({
                    title: '成功',
                    message: '添加成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.dialogVisible = false
                  this.getList()

                }
              })

            } else if (this.dialogTitle == '编辑') {

              client.updateClientInfo(this.form).then((res) => {
                console.log(res)
                if (res.status == 200) {
                  this.$notify({
                    title: '成功',
                    message: '编辑成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.dialogVisible = false
                  this.getList()

                }
              })


            }
          } else {
            console.log('error submit!!')
            return false
          }
        })


      },
      cancel(){
        this.dialogVisible = false;
        this.form = {};
      },
      reset() {
        this.listQuery = {}
        this.getList()
      }
    }
  }
</script>

<style scoped>
  .app-select {
    margin-bottom: 20px;
  }
</style>
